<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/aui.css"/>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/alert.css">
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/init.js"></script>
    <style>
        @media screen and (max-width:320px){
            .box_small{height:36vh;}
        }

    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav ">
        <a href="index.php" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="page_title">{$data.page_title}</h1>
    </header>

    <div class="mui-content aui-pad-10">
        <div class="user aui-mar-t-10 re">
            <div class="user_id re" style="width:50%">
                <div class="user_bg ab"></div>
                <img class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="40%">
                <div class="ab aui-pad-t-10 aui-pad-l-5" style="margin-left:42%;width:50%;">
                    <div class="aui-col-10 ellipsis f14"><img src="image/sex1.png" alt="" width="14"><span class="aui-pad-l-5" style="width:40%;">小思设计2017</span></div>
                    <div class="f12 aui-col-8 ellipsis">ID:123456</div>
                </div>
            </div>
            <div class="user_jf ab" style="width:45%;">
                <div class="user_bg ab" style="width:85%;height:40px;left:0;"></div>
                <img class="ab" style="right:0;" src="images/rmb.png" alt="" width="40">
                <div class="ab f12 aui-pad-10 aui-col-9"><div class="fl aui-col-4 ellipsis"><img class="vmid" src="images/xing.png" alt="" width="22">9999999</div> <div class="fl aui-col-5 ellipsis aui-pad-l-5"><img class="vmid" src="images/zuan.png" alt="" width="20">9999999999</div></div>
            </div>
            <div class="icon mui-text-right" style="padding-top:44px;">
                <img src="images/paihang-icon.png" alt="" width="28">
                <img src="images/active-icon.png" alt="" width="28">
                <img src="images/beibao-icon.png" alt="" width="28">
                <img src="images/vip-icon.png" alt="" width="28">
                <img src="images/set-icon.png" alt="" width="28">
            </div>
        </div>
        <!--user信息-->
        <div class="flex aui-pad-10 f14 aui-border-radius" style="background:#fee630;box-shadow:3px 3px 3px #dab91e;">
            <div class="f1"><img class="vmid border-r-1 aui-pad-r-10" src="images/jiebao.png" alt="" height="30"></div>
            <div class="f5 border-r-1 hidden">
                <img class="vmid fl aui-mar-r-10 aui-mar-l-5" src="images/jiangpin.png" alt="" height="30">
                <marquee behavior="" direction="down" scrolldelay="200" style="line-height:16px;width:75%;height:30px;overflow: hidden;color:#d80000;display:block;float:left;">
                    <ul>
                        <li class="aui-mar-b-5 ellipsis">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                        <li class="aui-mar-b-5 ellipsis">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                        <li class="aui-mar-b-5 ellipsis">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                    </ul>
                </marquee>
            </div>
            <div class="f1 mui-text-right f12" style="line-height:30px;">更多</div>
        </div>
        <!--江湖捷报-->
        <div class="aui-mar-t-10"><img class="aui-col-10" src="images/page_baozang.png" alt=""></div>
    </div>

    <div class="box_small aui-pad-10 aui-mar-t-5 re" >
        <div class="box_title ab mui-text-center">会员特权</div>
        <ul class="aui-pad-15 aui-mar-t-15 f14" style="height:90%;overflow-y: auto;">
            <li class="aui-mar-b-10">
                <img class="aui-col-3 vmid" src="images/chongzhika.jpg" alt="">
                <span class="aui-mar-l-10">福利翻倍</span>
            </li>
            <li class="aui-mar-b-10">
                <img class="aui-col-3 vmid" src="images/chongzhika.jpg" alt="">
                <span class="aui-mar-l-10">福利翻倍</span>
            </li>
            <li class="aui-mar-b-10">
                <img class="aui-col-3 vmid" src="images/chongzhika.jpg" alt="">
                <span class="aui-mar-l-10">福利翻倍</span>
            </li>
            <li class="aui-mar-b-10">
                <img class="aui-col-3 vmid" src="images/chongzhika.jpg" alt="">
                <span class="aui-mar-l-10">福利翻倍</span>
            </li>
            <li class="aui-mar-b-10">
                <img class="aui-col-3 vmid" src="images/chongzhika.jpg" alt="">
                <span class="aui-mar-l-10">福利翻倍</span>
            </li>
            <li class="aui-mar-b-10">
                <img class="aui-col-3 vmid" src="images/chongzhika.jpg" alt="">
                <span class="aui-mar-l-10">福利翻倍</span>
            </li>
        </ul>
    </div>
    <div class="open fix mui-text-center aui-background-orange aui-color-white line-height-3 f14 aui-col-10" style="left:0;bottom:0;">立即开通</div>


    <!--弹窗开始-->
    <div class="alert none">
        <div class="vip aui-pad-10 aui-background-white f14 mui-text-center">
            <div class="aui-border-b-gray line-height-3"><b>VIP会员支付</b></div>
            <ul class="hidden aui-mar-t-10">
                <li class="active">
                    <div class="">1个月</div>
                    <div class="f12 aui-color-red">￥30</div>
                </li>
                <li>
                    <div class="">3个月</div>
                    <div class="f12 aui-color-red">￥85</div>
                </li>
                <li>
                    <div class="">6个月</div>
                    <div class="f12 aui-color-red">￥178</div>
                </li>
                <li>
                    <div class="">12个月</div>
                    <div class="f12 aui-color-red">￥30</div>
                </li>
            </ul>
            <div class="mui-text-center aui-background-orange aui-color-white line-height-3 f14 aui-col-9 aui-border-radius-30 aui-mar-t-10" style="margin-left:5%;">立即支付</div>

        </div>
    </div>
</body>
<script>
    $(".open").click(function(e){
        $(".alert").show();
        $(".vip").animate({bottom:0});
        e.stopPropagation();
    })
    $(".vip").click(function(e){
        e.stopPropagation();
    })
    $(document.body).click(function(){
        $(".alert").hide();
        $(".vip").animate({bottom:"-300px"})
    });

    $(".vip ul li").click(function(){
        $(".vip ul li").removeClass("active");
        $(this).addClass("active");
    })

</script>
</html>